import React, { Component, createRef } from "react";

/**
 * refs:用于访问 在render中创建的DOM节点或react元素，
 * 不能过度使用，会影响执行效率
 * 适用于获得表单焦点、文本选择
 */

export default class Uncontrol extends Component {
    state = { num: 0 };
    h = createRef(); //注意import解构之后才能使用
    componentDidMount() {
        // ref是字符串形式获取DOM节点(已弃用)
        // console.log(this.refs.inp);
        this.refs.inp.focus(); //打开界面自动获得焦点

        //createRef方式获取后DOM节点
        console.log(this.h.current);
    }
    add = () => {
        this.setState({ num: this.state.num + 1 });
        // 无论执行什么，只要有setState就会更新
    };

    /* 类绑定：给类的实例再声明一个函数,在绑定事件的时候使用 */
    getNode = (node) => {
        this.h2 = node;
    };

    render() {
        console.log(this); //this指类实例化出来的对象
        return (
            <div>
                <h1 ref="title">refs的用法</h1>
                <input ref="inp" />

                {/* 这种写法可以避免执行两次 */}
                <h2 ref={this.getNode}>ref的回调函数用法</h2>
                <h3 ref={(node) => (this.h2 = node)}>ref的回调函数用法</h3>
                {/* 会在实例属性上添加h2属性 ，在更新的过程中会执行两次，
                第一次是传入null，第二次再传入相应的参数，清空旧的形成新的*/}

                <h2 ref={this.h}>createRef()形式</h2>

                <h2>{this.state.num}</h2>
                <button onClick={this.add}>点我加一</button>
            </div>
        );
    }
}
